<template>
    <div class="main">
        <div class="check-task">

			<div class="up-part">
				<div>
					<div>
						<van-field
							class="input_text"
							label="线索描述"
							required
						>
                        <template #input>
								<div></div>
							</template>
						</van-field>
					</div>
					<van-field
						v-model="data.Remarks"
						rows="3"
						autosize
						type="textarea"
					/>
				</div>
			</div>

            <div class="upload-hd">
                <span class="imglist"><a style="color:red;margin-left:10px;">*</a>线索附件</span>
                <div class="imgs mr-10" v-for="(item, index) in fileList" :key="index">
                    <img class="upload-img" :src="baseUrl + item" />
                    <div class="delImg" @click="DelImg(index)">
                        <img src="@/assets/Images/AppIcon//icon_cancel.png" />
                    </div>
                </div>
                <van-uploader
                    v-if="fileList.length < 3"
                    @oversize="onOversize"
                    :after-read="afterRead"
                >
                <img
                    class="upload-img"
                    src="@/assets/Images/AppIcon/upload_picture.png"
                    alt=""
                />
                </van-uploader>
            </div>

        </div>

        <div class="bottom_submit">
			<van-button class="button" type="primary" @click="_submit()" >提 交</van-button>
		</div>

    </div>
</template>

<script>
import { upload } from '@/api/common'
import { mapGetters } from 'vuex'
export default {

	data() {
		return {
            Info:this.$route.query.Info,
            TypeCode:this.$route.query.TypeCode,
            data: {
                Remarks: ""
            },
            fileList: [],
            information:{},
        }
	},

    computed: {
		...mapGetters(['baseUrl', 'CompanyCode', 'roles']),
	},

    created() {

	},

    methods:{
        // 上传图片
		afterRead(file) {
			let params = new FormData() //创建form对象
			params.append('file', file.file)
			upload(params)
				.then((res) => {
					res.data.forEach((item) => {
						this.fileList.push(item.FilePath)
					})
				})
				.catch((err) => {
					console.log('err', err)
				})
		},

        onOversize(file) {
			Toast('文件大小不能超过 2M')
		},

        // 删除图片
		DelImg(idx) {
			const _this = this;
			_this.$dialog.confirm({
                title: '询问',
                message: '确定要删除此照片吗？',
            })
            .then(() => {
                _this.fileList.splice(idx, 1)
            })
            .catch(() => {
                // on cancel
            })
		},

        // 提交
        _submit(){
			if(this.data.Remarks == null || this.data.Remarks == ""){
				return this.$toast('请输入线索描述');
			}
			else if(this.fileList.length == 0){
				return this.$toast('请上传线索照片');
			}
            this.information.Name = this.Info.Name;
            this.information.Mobile = this.Info.Mobile;
            if(this.Info.Native){
                this.information.Native = this.Info.Native;
            }
            if(this.Info.Residence){
                this.information.Residence = this.Info.Residence;
            }
            if(this.Info.Company){
                this.information.Company = this.Info.Company;
            }
            if(this.Info.Occupation){
                this.information.Occupation = this.Info.Occupation;
            }
            this.information.ClueType = this.TypeCode;
            this.information.Remarks = this.data.Remarks;

			this.information.AttachImage = this.fileList.join(";");

            this.$axios.post("/ChsReportPerson/AddPost",this.information)
            .then((res)=>{
                if (res.success) {
                    this.$toast.success("新增成功!");
                    this.$router.push({path: "/chsReport/Detail"});
                }
            })
            .catch((err)=>{
                console.log("err", err);
            })
        },
    }
}
</script>

<style lang="less" scoped>
.main{
    font-size: 14px;
}
.upload-hd {
    background-color: white;
	display: flex;
    padding-top: 10px;
	padding-bottom: 10px;
    color:rgb(100,101,102);
	.upload-img,
	.imgs {
		position: relative;
		width: 60px;
		height: 60px;
	}
	.delImg {
		position: absolute;
		top: -5px;
		right: -5px;
		width: 16px;
		height: 16px;
		img {
			width: 100%;
			height: 100%;
		}
	}
}
.imglist{
    margin-right: 40px
}
.check-task {
	background-color: #e8f1f8;
	padding-bottom: 20px;
}
.input_text{
    margin-left: 10xp;
}
.bottom_submit{
	width: 100%;
	text-align: center;
}
.button{
	width: 98%;
}
</style>
